<template>
  <div>
    <!-- 头部 -->
    <div id="app" v-title data-title="飞熊科技-首页"></div>
    <div class="header">
      <p v-if="!flag" class="loginBtn"><el-button size="medium" type="primary" @click="Inlogin">登录</el-button></p>
      <p v-if="flag" class="loginBtn">
        <span class="spanText">用户：{{ userId }}</span> <el-button size="medium" type="primary" @click="outLogin">退出登录</el-button>
      </p>
      <span class="logo"> <img src="../assets/imges/logo.png" alt="" /></span>
      <ul>
        <li class="index" @click="goHome">首页</li>
        <li class="product" @click="goProduct">产品介绍</li>
        <li class="solution" @click="goSolution">解决方案</li>
      </ul>
    </div>
    <!-- 首页主体 -->
    <div class="container">
      <div class="img1">
        <img class="imags" src="../assets/imges/1.png" alt="" />
      </div>
      <div class="img2">
        <img class="imags" src="../assets/imges/2.png" alt="" />
      </div>
      <div class="img3">
        <img class="imags" src="../assets/imges/3.png" alt="" />
      </div>
      <div class="img4">
        <img class="imags" src="../assets/imges/4.png" alt="" />
      </div>
      <div class="img5">
        <img class="imags" src="../assets/imges/5.png" alt="" />
      </div>
      <div class="img6">
        <img class="imags" src="../assets/imges/6.png" alt="" />
      </div>
      <div class="img7">
        <img class="imags" src="../assets/imges/7.png" alt="" />
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <img src="../assets/imges/首页_02.jpg" alt="" />
      <img src="../assets/imges/底部.png" alt="" />
    </div>
  </div>
</template>
<script>
// import { getCookie, delCookie } from './login/cookies.js'
export default {
  components: {},
  data() {
    return {
      activeName: '',
      flag: false,
      path: '',
      userId: '',
    }
  },
  methods: {
    goHome() {
      this.$router.push({ name: 'Home' })
    },
    goProduct() {
      this.$router.push({ name: 'product' })
    },
    goSolution() {
      this.$router.push({ name: 'solution' })
    },
    // 跳转登录
    Inlogin() {
      this.$router.push({ name: 'login' })
    },
    // 退出登录
    outLogin() {
      localStorage.clear()
      this.flag = false
      this.$message({
        message: '已退出登录！',
        type: 'success',
      })
    },
  },

  activated() {
    console.log(localStorage.getItem('token'))
    if (localStorage.getItem('token')) {
      this.userId = localStorage.getItem('username')
      this.flag = true
    } else {
      this.flag = false
    }
  },
  created() {},
}
</script>
<style>
.warp {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .warp {
    width: 750px;
  }
}
.img {
  width: 1920px;
}
@media (min-width: 992px) {
  .warp {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .warp {
    width: 1170px;
  }
}
</style>
<style scoped>
img {
  width: 100%;
  margin-top: -5px;
}
.container {
  width: 100.35%;
}
.img .imags {
  width: 100%; /*相对于父级的宽计算*/
  height: 100%; /*相对于父级的宽计算*/
}
* {
  margin: 0;
  padding: 0;
}
/deep/#tab-home {
  width: 83px !important;
}
/* .img img {
  margin-top: -5px;
} */
.spanText {
  font-size: 16px;
  margin-right: 15px;
}
.index {
  border-bottom: 2px #31adda solid !important;
}
.logo {
  float: left;
  margin-right: 96px;
  margin-top: 8px;
}
/* ul {
  position: relative;
} */
/* .img1 {
  width: 100%;
  height: 420px;
  background-image: url(../assets/imges/1.png);
  background-repeat: no-repeat;
  /* background-size: contain; */
/* } */

/* .img2 {
  width: 100%;
  height: 215px;
  background-image: url(../assets/imges/2.png);
  background-repeat: no-repeat;
  /* background-size: contain; */
/* }  */
ul li {
  float: left;
  display: block;
  list-style: none;
  cursor: pointer;
  width: 96px;
  height: 57px;
  opacity: 1;
  font-size: 16px;
  font-family: Noto Sans S Chinese Regular, Noto Sans S Chinese Regular-Regular;
  font-weight: 500;
  margin-left: 35px;
  text-align: center;
  line-height: 57px;
}

.footer {
}
.fr {
  float: right;
}
/deep/#tab-product {
  width: 100px !important;
}
/deep/#tab-solution {
  width: 83px !important;
}

.header {
  position: relative;
  padding: 0 45px;
  width: 95.6%;
  height: 59px;
  line-height: 57px;
  border-bottom: 1px solid #c1c1c1;
  margin-top: -6px;
  opacity: 1;
  background: rgba(215, 218, 219, 0.1);
}

.loginBtn {
  position: absolute;
  right: 106px;
}

/deep/.el-tabs__nav-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  z-index: 1;
}
</style>
